body{
    padding: 0;
    margin: 0;
    color: var(--text-primary);
}

:root {
    --primary: #5865F2;
    --primary-dark: #4752C4;
    --secondary: #3BA55D;
    --input-bg: #40444B;
    --bg-primary: #1e1f29;
    --bg-secondary: #2a2b36;
    --bg-tertiary: #3a3b45;
    --bg-dark: #1E2025;
    --accent-primary: #5865F2;
    --accent-secondary: #7c85e24f;
    --text-primary: #ffffff;
    --text-secondary: #b9bbbe;
    --text-tertiary: #72767d;
    --success: #3ba55d;
    --warning: #faa81a;
    --danger: #ed4245;
    --online: #3ba55d;
    --idle: #faa81a;
    --dnd: #ed4245;
    --offline: #747f8d;
    --border-radius: 8px;
    --transition: all 0.2s ease;
    --hover: #4f545c29;
    --hover-dark: #00000080;
    --musicHeight: 68px;
}

div{
    &::-webkit-scrollbar-thumb{
        transition: 0.5s all ease;
        background-color: transparent;
        opacity: 0;
        border-radius: 3px;
    }
    &::-webkit-scrollbar-track{
        background-color: transparent;
        padding: 20px 0;
    }
    &::-webkit-scrollbar{ 
        width: 6px;
        height: 6px;
    }
    &:hover::-webkit-scrollbar-thumb{
        background-color: #8b8b8b;
        opacity: 1;
    }
}

textarea{
        &::-webkit-scrollbar-thumb{
        transition: 0.5s background-color ease;
        background-color: transparent;
        border-radius: 3px;
    }
    &::-webkit-scrollbar-track{
        background-color: transparent;
        padding: 20px 0;
    }
    &::-webkit-scrollbar{ 
        width: 6px;
        height: 6px;
    }
    
    &:hover::-webkit-scrollbar-thumb{
        background-color: #8b8b8b;
    }
}